5-2 ぅwq仵蛌洏

若要重複使用 JavaScript 的函數,可將這些常用的函數匯整到一個函數定義檔案,再以下列方式來將函數程式碼加入網頁之中:
<script src="函數定義檔案.js"></script>
上述範例中的函數定義檔的副檔名是 "js",這只是一般習慣,使用者也可以選用其它任意副檔名。但是若找不到檔案,網頁並不會印出錯誤訊息,這是要特別注意的地方。

使用函數定義檔的好處是:

以下這個範例,就是使用這種方法來包含一個 JavaScript 的函數定義檔案,此檔案定義了兩個函數,可分別傳回現在時間與星期幾,網頁呈現效果如下:

Example(timeDisplay02.htm):

當使用者按下「顯示現在時間」時,瀏覽器就會去呼叫定義於 time.js 的函數 currentTime() 以取得現在時間,並將結果顯示於警告視窗。此範例原始碼如下:

原始檔(timeDisplay02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用函數定義檔案來顯示現在時間</h2>
<hr>

<script src="time.js"></script>
<a href="javascript:alert('現在是「' + currentTime()+ '」!')">顯示現在時間</a><br>
<a href="javascript:alert('今天是「' + currentDay() + '」!')">顯示星期幾</a><br>

<hr>
</body>
</html>

在上例中,我們交互運用雙引號 (") 及單引號 ('),以明白區分 href 所用的字串及 JavaScript 所用的字串。上例包含了一個 JavaScript 的函數定義檔 time.js,其原始檔案內容如下:

原始檔(time.js):(灰色區域按兩下即可拷貝)
// 與日期相關的函數
function currentTime(){		// 回傳現在的時間
	var today = new Date();
	var hour = today.getHours();
	var minute = today.getMinutes();
	var second = today.getSeconds();
	var prepand = (hour>12)? "下午":"上午";
	hour = (hour>12)? hour-12:hour;
	return(prepand + hour + " 點 " + minute + " 分 " + second + " 秒");
}

function currentDay(){		// 回傳今天星期幾
	var today = new Date();
	var day = today.getDay();	// 取得今天是星期幾
	var conversion=["天", "一", "二", "三", "四", "五", "六"];
	return("星期"+conversion[day]);
}

(有關於時間和日期的用法,請見本書前幾章的說明。)

我們也可以更複雜的例子,可見下面的文件性質列表:

Example(docProp01.htm):

其原始檔案內容如下:

原始檔(docProp01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>"document" 的性質列表</h2>
<hr>
<a href="http://www.nthu.edu.tw">清大首頁</a><br>
<a href="http://www.nctu.edu.tw">交大首頁</a><br>
<a href="http://www.ntu.edu.tw">台大首頁</a>
<hr>

<script src="listProp.js"></script>
<p><h3>"document" 的性質列表:</h3>
<p><script>listProp(document, "document")</script>

<hr>
</body>
</html>

上述範例包含了一個 listProp.js 檔案,其內容如下:

原始檔(listProp.js):(灰色區域按兩下即可拷貝)
// 列印物件性質
function listProp(obj, objName) {
	for (var i in obj)
		document.writeln(objName+".<font color=red>"+i+"</font> = <font color=green>"+obj[i]+"</font><br>");
}

在上述的程式碼中,我們用到了 for-in 迴圈,此種迴圈特別適用於列出一個物件的所有性質。(有關於文件的性質,請見下一章的說明。)


JavaScript 程式設計與應用:用於網頁用戶端